<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Article Preview</title>
    <link rel="stylesheet" type="text/css" href="/static/css/book.css">
    <script type="text/javascript" src="/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/js/book.js"></script>
    <script type="text/javascript" src="/static/js/articlePre.js"></script>
</head>
<style type="text/css">
    .imgFloat {
        width: 100px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        background-color: #007aff;
        display: none;
    }

    .tArea {
        margin: 10px;
        width: 380px;
    }

    #pageNumber {
        width: 280px;
        height: 38px;
    }

    .updatePageCon {
        display: inline-block;
        border: #666666 solid 1px;
        height: 36px;
        width: 40px;
        text-align: center;
        border-radius: 5px;
    }

    .updatePageCon:hover {
        background-color: #666666;
        box-shadow: 2px 2px 3px #aaaaaa;

    }
</style>
<script>
    function pageUpdate() {
        let p = document.getElementById("updPage");
        let pageNumber = document.getElementById("pageNumber");
        p.href = "/admin/book/updatePage?page=" + pageNumber.value;
        console.log(p.href)
    }
</script>
<body>
<div class="content" id="baseKnowledge" style="float:left;">
    <section id="knowledge" class="viewBlock">
        <div class="bookBox" id="bBox">
            <a class="lastBtn"><</a>
            <a class="nextBtn">></a>
            <div class="bookPage first">
                {{if .page}}
                    <img id="img0" src="{{.page.HomePage}}" width="360" height="400"/>
                {{else}}
                    <img id="img0" src="/static/img/baseknowledge/dataImg1.png" width="360" height="400"/>
                {{end}}
            </div>
            <div class="bookPage runPage">
                <div class="bookWord">
                    <a href="index.html"><span id="t_name">使用指南</span></a>
                    <div id="a_content">
                        &emsp;&emsp;添加书页内容，直接填入书页信息即可。修改书页信息请输入要修改的页数！！！如果需要添加当前页面的图片，请先上传图片，另外，另外为了保证整个书本的显示效果，请将每页的字数
                        控制在 300 字以内。如果想要在段落中进行换行清使用“<"+"br"+">”,html中的换行符进行表示。<br>
                        &emsp;&emsp;系统主要分为三个部分，第一部分是对软工知识的补充，另外，我们计划着，系统中加入”博客“部分以丰富软工工程的相关知识；子案例分析，以及完整案例分析。

                    </div>
                    {{if .page}}
                        <span class="pageNumber">{{.page.Id}}</span>
                    {{else}}
                        <span class="pageNumber">1</span>
                    {{end}}
                </div>
                {{if .page}}
                    <img id="img1" class="bookImg" src="{{.page.ImgId}}" width="360" height="400"
                         style="transform:rotateY(180deg);"/>
                {{else}}
                    <img id="img1" class="bookImg" src="/static/img/baseknowledge/dataImg2.png" width="360" height="400"
                         style="transform:rotateY(180deg);"/>
                {{end}}

            </div>

        </div>

    </section>

    <div style="text-align:center;">

    </div>
</div>
<div class="editContent"
     style="margin-right:180px;margin-top: 60px;width:400px;height:600px;float: right;background-color: #f0f0f0">
    <div style="height: 100px">
        <div style="width: 400px;height: 40px;text-align: center;line-height: 40px">
            <h1>Book Edit</h1>
        </div>
        <div style="width: 380px; height: 40px;margin: auto;line-height: 40px">
            <span> <label for="pageNumber"><input type="text" id="pageNumber" placeholder="请输入页数"
                                                  onkeyup="pageUpdate()"> </label>
                <a href="/" class="updatePageCon" id="updPage">修改</a></span>

        </div>

        <br>
        <form action="/admin/bookSubmit" method="post">

            <textarea class="tArea" type="text" id="HomePat" style="height: 40px" name="homePage"
                      placeholder="请选择首页图片" onclick="showImagePage('HomePat')">{{.page.HomePage}}</textarea>
            <textarea class="tArea" type="text" id="titleName" style="height: 20px" name="title"
                      placeholder="请输入此页标题" onkeyup="titleN()">{{.page.Title}}</textarea>
            <textarea class="tArea" type="text" id="articleCon" style="height: 100px;" name="content"
                      placeholder="请输入此页内容" onkeyup="articleC()">{{.page.Content}}
            </textarea>
            <textarea class="tArea" type="text" id="imagePat" style="height: 40px" name="imgId"
                      placeholder="请选择图片" onclick="showImagePage('imagePat')">{{.page.ImgId}}</textarea>
            <textarea class="tArea" type="text" id="imagePat" style="height: 40px" name="page"
                      placeholder="请输入插入的页">{{.page.Id}}</textarea>
            <label><input name="deploy" type="radio" value="1"/>发布 </label>
            <label><input name="deploy" type="radio" value="0"/>保存 </label>
            <button type="submit">提交</button>
        </form>
    </div>
    <div id="imageShowDiv"
         style=" width:150px;height: 300px;position: relative;left: 405px;margin-top: -50px;display: none;border: #666666 solid 1px">
        <div style="width: 150px;height:300px;overflow: auto">
            {{range $image := .images}}
                <label for="{{$image.Id}}">
                    <img id="image{{$image.Id}}" class="imgSel" src="/{{$image.Path}}" height="100" width="100"
                         name="">
                </label>
                <input type="checkbox" id="{{$image.Id}}" name="checked">
            {{end}}
        </div>
        <button id="b_select" onclick="selectImg('HomePat')" style="display: none;position:relative;top: 5px">确定
        </button>
        <button id="b_select1" onclick="selectImg('imagePat')" style="display: none;position:relative;top: 5px;">确定
        </button>
        <button id="b_cancel" onclick="closeImagePage()" style="position:relative;left: 50px;top: -20px">取消</button>
    </div>
</div>
</body>
</html>